import { useState, useEffect, useContext } from 'react';
import { NavBar, Popup, List, InfiniteScroll  } from 'antd-mobile';
import moment from 'moment';

import SingleMessage from '../SingleMessage';
import AvatarImage from '../AvatarImage';

import { MsgTypeMap } from '../../constants';
import { MySdkStoreContext } from '../../context';

import './style.scss';

export default function(props) {
  const { onClose } = props;
  const mySdkStore = useContext(MySdkStoreContext);
  const { cid, quotedInfo } = props;
  // 基于回复列表的第一条消息
  const [sourceMessage, setSourceMessage] = useState({});
  const [list, setList] = useState([]);
  const [pagination, setPagination] = useState({});

  // 获取话题回复列表
  const getList = async (pageIndex) => {
    const data = await mySdkStore.sdk.queryTopicMessage({ cid, topicId: quotedInfo?.topicId, pageIndex });
    const { rows = [], next, current, totalItemCount, totalPage } = data;
    setPagination({ pageIndex: current, next: +next, totalItemCount, totalPage });

    if (pageIndex === 1 ) {
      const [source = {}, ...reply] = rows;
      setList(reply);
      setSourceMessage(source);
    } else {
      setList([...list, ...rows]);
    }
  }

  // 定位到聊天记录
  const handleScollToTopic = () => {
    document.getElementById(quotedInfo?.topicId)?.scrollIntoView();
    onClose();
  }

  useEffect(() => {
    getList(1);
  }, []);

  return <Popup
    visible
    bodyClassName="replyListComponent"
  >
    <NavBar
      onBack={onClose} style={{ background: '#fff', border: 'none' }}
      right={<a onClick={() => handleScollToTopic()}>定位到消息</a>} >
      话题</NavBar>
    <List style={{ "--border-inner": 0, "--border-top": 0, "--border-bottom": 0, '--align-items': 'top', padding: '12px' }}>
      <List.Item
        className="sourceMessage"
        key={sourceMessage.userId}
        prefix={
        <>
          <AvatarImage
            src={sourceMessage.from?.avatarUrl}
            nickName={sourceMessage.from?.nickName}
            userName={sourceMessage.from?.userName}
            userId={sourceMessage.from?.userId}
            style={{ display: 'inline-block', marginTop: 12, borderRadius: 8 }}
            fit='cover'
            width={42}
            height={42}
          />
      </>}
      >
        <div>
          { sourceMessage.from?.useName || sourceMessage.from?.nickName  || sourceMessage.from?.userId }
          <div style={{ marginBottom: 8, color: 'rgb(153, 153, 153)', fontSize: 12 }}>{moment(sourceMessage.timestamp).format('YYYY-MM-DD HH:mm:ss')}</div>
        </div>
        <SingleMessage type={MsgTypeMap[sourceMessage.contentTypeCode]?.toLowerCase()} msgContent={sourceMessage.content} componentDisplaySource="replyList" />
      </List.Item>
      {list.map(item => {
        return <List.Item
          key={item.id}>
          {/* <SingleMessage {...item} msgContent={item.content} type={item.msgType} /> */}
          <div className="rightContent">
            <SingleMessage type={MsgTypeMap[item.contentTypeCode]?.toLowerCase()} msgContent={item.content} componentDisplaySource="replyList" />
          </div>
          </List.Item>
      })}
    </List>
    <InfiniteScroll loadMore={() => getList(pagination.pageIndex + 1)} hasMore={pagination.totalPage > pagination.pageIndex} />
  </Popup>
}